<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .parent{
            display: table;
            width: 400px;
            height: 400px;
            text-align: center;
            border:1px solid red;
            margin:0 auto;
            background: blue;   /*背景颜色无效*/
        }
        .child{
            display: table-cell;    /*子元素成为表格单元格（类似 <td> 和 <th>）*/
            height: 200px;
            /* background: yellow; */
            vertical-align: middle; /*表格容器可以设置垂直对齐属性*/
            white-space: pre;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
        </div>
    </div>
</body>
</html>